<template>
    <div>
        <!-- 查询直播表全部数据 马佳乐 2023年8月23日17点12分-->
  <el-table :data="LiveData" stripe style="width: 100%">
            <!-- <el-table-column
            prop="id"
            label="编号">
            </el-table-column> -->
            <el-table-column
            prop="nickName"
            label="教师姓名">
            </el-table-column>
            <el-table-column
            prop="roomNum"
            label="直播房间号">
            </el-table-column>
            <el-table-column
            prop="dictName"
            label="分类">
            </el-table-column>
            <el-table-column
            prop="liveStatus"
            label="直播状态">
            <template slot-scope="scope">
                <span v-if="scope.row.liveStatus == 0" >正在直播</span>
                <span v-if="scope.row.liveStatus == 1" >尚未直播</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="liveRoomStatus"
            label="封禁/解封">
            <!-- 滑块开关 -->
            <template slot-scope="scope">
                <el-switch v-model="scope.row.liveRoomStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                    @change=changliveRoomStatus($event,scope.row)>
                </el-switch>
            </template>
            </el-table-column>
            
            <el-table-column
            prop="createTime"
            label="开播时间">
            </el-table-column>
            <!-- <el-table-column fixed="right" label="操作" width="360">
                <template slot-scope="scope">
                    <el-button @click="upUserWindows(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="updatedelete(scope.row.id)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <br>
        <!-- 分页 马佳乐 2023年6月19日19点37分-->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalSize">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data () {
        return {
            LiveData: [],
            // 分页
            page: {
                totalSize: 0,
                pageNum: 1,
                pageSize: 10
            },
        }
    },
    mounted () {
        this.getlive()
    },
    methods: {
        // 用户表 全查
        getlive () {
            // 查看所有用户表信息
            this.$axios.get('/live/queryLive', {
                params: {
                    // 当前页
                    pageNum: this.page.pageNum,
                    // 每页条数
                    pageSize: this.page.pageSize,
                    // id: this.idss
                }
            }).then(res => {
                if (res.data.flag) {
                    this.LiveData = res.data.data.content
                    this.page.totalSize = res.data.data.totalSize
                }
                this.loading = false
            }).catch(err => {
                this.Mymessage('error', err)
            })
        },
        changliveRoomStatus(e,data){
            // console.log(id)
            if(data.liveRoomStatus == 1){
                this.banneds(data.id)
            } else{
                this.enables(data.id)
            }
        },
        // 将直播间进行封禁方法
        banneds(id){
        const form = new FormData();
        form.set("id", id);
        this.$axios
          .post("/live/banned",form)
          .then((res) => {
            if ((res.data.data.code == 200)) {
              this.Mymessage("success", "封禁成功");
              this.updatedisable = false
              this.getlive();
            } else {
              this.Mymessage("wanging", "封禁失败");
            }
          })
          .catch(() => {
            this.Mymessage("info", "封禁有误");
          });
        },
        // 将直播间解封的方法
        enables(id){
            const forms = new FormData();
            forms.set("id", id);
            this.$axios
            .post("/live/enable",forms)
            .then((res) => {
                if ((res.data.data.code == 200)) {
                this.Mymessage("success", "启用成功");
                this.getlive();
                } else {
                this.Mymessage("wanging", "启用失败");
                }
            })
            .catch(() => {
                this.Mymessage("info", "启用有误");
            });
        },
        // 分页
            handleSizeChange (val) { 
            this.page.pageSize = val
            this.getlive()
        },
            // 分页
            handleCurrentChange (val) { 
            this.page.pageNum = val
            this.getlive()
        },
            // 弹窗提示
            Mymessage (type, text) { 
            this.$message({
                showClose: true,
                message: text,
                type: type
            })
        }
    }
}
</script>
